<template>
  <div class="search-header-tab-wrap">
    <div class="search-header-tab">
      <el-tabs v-model="currentName" type="card">
        <el-tab-pane v-for="(tab, index) in tabList" :key="index" :name="tab.name">
          <template #label>
            <div class="wrap">
              <span class="label">{{ tab.label }}</span>
              <span v-if="tab.num" class="count">{{ tab.num }}</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'SearchHeaderTab',
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  tabList: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  activeName: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:active-name'])

const currentName = computed({
  get: () => props.activeName,
  set: (val) => {
    emit('update:active-name', val)
  },
})
</script>

<style lang="scss" scoped>
.search-header-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin: 0 20px;
  // border-bottom: 1px solid var(--table-border);

  &-wrap {
    width: 100%;
    // background: var(--background-color-base);
    border-radius: 6px 6px 0 0;
  }

  :deep(.el-tabs) {
    .el-tabs__header {
      margin: 0;
      border-bottom: none;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__item {
        position: relative;
        height: 50px;
        padding: 0 10px;
        line-height: 50px;
        color: var(--color-base);
        border-left: none;

        &::after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 2px;
          height: 20px;
          background: var(--table-border);
          content: '';
          transform: translateY(-50%);
        }

        &:last-child {
          &::after {
            display: none;
          }
        }

        .wrap {
          display: inline-block;
          height: 30px;
          padding: 0 30px;
          line-height: 30px;
        }
      }

      .count {
        margin-left: 4px;
        color: #ea6343;
      }

      .el-tabs__item.is-active {
        border-bottom: none;

        .wrap {
          color: var(--submenu-text-color-active);
          background: var(--submenu-background-active-color);
          border-radius: 6px;

          .count {
            color: var(--submenu-text-color-active);
          }
        }
      }
    }
  }
}
</style>
